<template>
    <h2>会员权益显示页面2</h2>  
    权限名称<input type="text" v-model="MRname" />
    是否自定义
    <select v-model="IsCustom">
        <option :value="null">请选择</option>
        <option :value="true">是</option>
        <option :value="false">否</option>
    </select>
    <input type="button" value="添加" @click="addRight"/>
    <input type="button" value="查询" @click="loadData"/>
   <table border="1">
    <thead>
        <tr>
        <td>权限编号</td>
        <td>权限名称</td>
        <td>权限说明</td>
        <td>权限是否自定义</td>
        <td>权限类型</td>
        <td>权限规则</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
        <tr v-for="item in member" :Key="item.MR_Id">
        <td>{{item.MR_Id}}</td>
        <td>{{item.MR_Name}}</td>
        <td>{{item.MR_Info}}</td>
        <td>{{ item.MR_IsCustom==true?"是":"否" }}</td>
        <td>{{item.MR_RuleType==1?"折扣":item.MR_RuleType==2?"餐饮":"延时"}}</td>
        <td>{{item.MR_Rule}}</td>
        <td>
          
        </td>
    </tr>
    </tbody>
   </table>
   当前共{{ pinfo.count }}条数据，每页{{ pinfo.size }}条数据,
   当前第{{ pinfo.index }}/{{ pinfo.pcount }}页
   <a href="#" style="margin-right:10px;" @click="PageInfp('F')">首页</a>
   <a href="#" style="margin-right:10px;" @click="PageInfp('P')">上一页</a>
   <a href="#" style="margin-right:10px;" @click="PageInfp('N')">下一页</a>
   <a href="#" style="margin-right:10px;" @click="PageInfp('E')">尾页</a>
   <select v-model="csize" @change="ChangeSize">
    <option :value="1">1条/页</option>
    <option :value="2">2条/页</option>
    <option :value="3">3条/页</option>
   </select>
   <input type="test" style="width:50px;" v-model="nindex"/>
   <input type="button" value="跳转" @click="jump"/>
</template>

<script setup lang="ts">
 import {ref,onMounted,computed} from 'vue'
    import {useRoute} from 'vue-router'
    import {useRouter} from 'vue-router'
    const router=useRouter();
    const route=useRoute();
    import axios from 'axios'
    //分页方法
    const PageInfp=(msg:string)=>{
       switch(msg)
       {
        case "F":
            pinfo.value.index=1;
            break;
        case "P":
            if(pinfo.value.index>1)
            {
                pinfo.value.index--;
            }
            else
            {
                alert('当前已经是首页了');
            }
            break;
        case "N":
            if(pinfo.value.index<pinfo.value.pcount)
            {
                pinfo.value.index++;
            }
            else
            {
                alert('当前已经是尾页了');
            }
            break;
        case "E":
            pinfo.value.index=pinfo.value.pcount;
            break;
       }
       loadData();
    }
    const csize=ref(2);
    //更改页容量
    const ChangeSize=()=>{
      pinfo.value.size=csize.value;
      pinfo.value.index=1;
      loadData();
    }
    //跳转指定页
    const nindex=ref("");
    const jump=()=>{
        if(nindex.value=="")
        {
            alert('请输入正确页码');
            return;
        }
        if(isNaN(Number(nindex.value)))
        {
            alert('请输入数字');
            return;
        }
        if(Number(nindex.value)>0&&Number(nindex.value)<=pinfo.value.pcount)
        {
            pinfo.value.index=Number(nindex.value);
            loadData();
        }
        else
        {
            alert('请输入正确页码');
            return;
        }
    }


const MRname=ref("");
const IsCustom=ref(null);
const pinfo=ref({
    index:1,
    size:3,
    count:0,
    pcount:0
})
const member=ref([{
      "MR_Id": "",
      "MR_Name": "",
      "MR_Info": "",
      "MR_IsCustom": false,
      "MR_RuleType": 0,
      "MR_Rule": ""
    }])
onMounted(()=>{
    loadData();
})
const loadData=()=>{
   
    axios.get('https://localhost:44320/api/Member/RShow',{
        params:{          
            MRname:MRname.value,
            IsCustom:IsCustom.value,
            index:pinfo.value.index,
            size:pinfo.value.size            
        }
    })
    .then(res=>{
        console.log(res.data);     
        member.value=res.data.pageList;
        pinfo.value.count=res.data.count;
        pinfo.value.pcount=res.data.pcount
    })
}

const addRight=()=>{
    router.push('/addRight');
}

</script>